<template>
  <div class="community" style="margin-top: 50px">
    <ul class="community-ul">
      <li class="community-li" v-for="product in temps" :key="product.id">
        <div class="community-firstImg">
          <img
            :src="product.pic_url"
            alt=""
            class="img1"
            @click.prevent="showdetails(product)"
          />
        </div>
        <h4 style="margin-left: 10px" class="content-neirong">
          <a href="#" style="font-size: 13px">{{ product.theme_title }}</a>
        </h4>
        <img :src="product.user_pic" alt="" class="img2" />
        <span style="margin-right: 110px">{{ product.user_name }}</span>
        <span>
          <span
            class="fa fa-heart"
            @click="showcolor(product)"
            :style="{ color: product.color }"
          ></span>
          <span>{{ product.like_count }}</span>
        </span>
      </li>
    </ul>

    <div class="fenye">
      <el-pagination
        @current-change="handleCurrentChange"
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "Community",
  data() {
    return {
      datas: [], //总的数据
      temps: [],
      currentPage: 1, //默认显示第几页
      totalCount: 1, //总条数
      pageSize: 12, //每页显示的条数
      pages: 0,
      newDatas: [],
    };
  },
  methods: {
    getData() {
      this.$axios.get("/api/users/getCommunityInfo").then((res) => {
        this.datas = res.data.results;
        this.datas.forEach((e) => {
          if (e.user_pic == null || e.user_pic == "") {
            e.user_pic = require("../assets/small_log.jpg");
          } else {
            e.user_pic = "http://localhost:3000/images/" + e.user_pic;
          }
        });
        let temp = this.datas;
        this.totalCount = res.data.results.length;
        this.pages = Math.ceil(this.totalCount / this.pageSize);
        this.currentPage = 1;
        temp = this.datas.slice(
          (this.currentPage - 1) * this.pageSize,
          this.currentPage * this.pageSize
        );
        this.temps = temp;
      });
    },
    // 分页
    // 每页显示的条数
    handleCurrentChange(val) {
      // 改变默认的页数
      let temp = this.datas;
      this.currentPage = val;
      temp = this.datas.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
      this.temps = temp;
    },
    showdetails(product) {
      console.log(product.theme_id);
      this.$router.push({
        path: "/communitymenu",
        query: { id: product.theme_id },
      });
    },
    showcolor(product) {
      if (localStorage.getItem("token")) {
        if (product.color == "black") {
          product.color = "red";
          product.like_count++;
          this.$axios.post("/api/users/addcolor", {
            user_id: localStorage.getItem("user_id"),
            theme_id: product.theme_id,
            color: product.color,
          });
        } else {
          product.color = "black";
          product.like_count--;
          this.$axios.post("/api/users/delcolor", {
            user_id: localStorage.getItem("user_id"),
            theme_id: product.theme_id,
          });
        }
        this.$axios.get("/api/users/getColor", {
          params: {
            theme_id: product.theme_id,
            user_id: product.user_id,
            like_count: product.like_count,
            // forward_count: product.forward_count,
          },
        });
      }
    },
  },
  created() {
    this.getData();
    setTimeout(() => {
      this.$axios
        .get("/api/users/viewcolor", {
          params: {
            user_id: localStorage.getItem("user_id"),
          },
        })
        .then((res) => {
          this.newDatas = res.data.results;
          this.newDatas.forEach((item1) => {
            this.datas.forEach((item) => {
              if (item.theme_id == item1.theme_id) {
                item.color = "red";
              }
            });
          });
        });
    }, 300);
  },
};
</script>

<style>
.content-neirong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fenye i {
  position: relative;
  top: 0px;
  right: 0px;
  font-size: 20px;
}
.fenye .el-pagination {
  margin-bottom: 20px;
}
.fenye {
  position: absolute;
  top: 1350px;
  left: 680px;
}
.fa-heart {
  font-size: 20px;
}

a {
  text-decoration: none;
  color: #000;
}
ul {
  list-style: none;
}
.community-firstImg {
  overflow: hidden;
}
.community {
  width: 1200px;
  margin: 0 auto;
}
.community-ul {
  display: flex;
  flex-wrap: wrap;
  width: 1500px;
}
.community-li {
  width: 240px;
  /* height: 400px; */
  border: 1px solid #ccc;
  border-radius: 10%;
  overflow: hidden;
  margin-left: 15px;
  margin-right: 40px;
  margin-bottom: 20px;
}
.community-li h4 {
  margin-top: 5px;
}
.community-li a:hover {
  text-decoration: none;
  color: #00f;
}
.community-li .img1 {
  width: 241px;
  height: 300px;
  transform: scale(1);
  transition: transform 1s ease 0s;
}
.community-li .img1:hover {
  transform: scale(1.05);
}
.community-li .img2 {
  width: 20px;
  height: 20px;
  border: 1px solid #999;
  border-radius: 50%;
  margin-left: 10px;
  margin-bottom: 5px;
}
</style>